import React, { useState } from 'react'
import { Modal } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import loginLeft from '@/img/loginleft.png'
import loginRight from '@/img/loginright.png'
import loginCodeBottom from '@/img/logincodebottom.png'

const modalWidth = 900
const modalHeight = 600
const blueWidth = 300
const borderRadius = 16

interface WeChatLoginModalProps {
  open: boolean
  onClose?: () => void
  onLoginSuccess?: () => void
}

const WeChatLoginModal: React.FC<WeChatLoginModalProps> = ({ open, onClose, onLoginSuccess }) => {
  const [isPasswordMode, setIsPasswordMode] = useState(false)
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = () => {
    if (username === '12345678901' && password === '123456') {
      window.alert('登录成功')
      setUsername('')
      setPassword('')
      if (onLoginSuccess) onLoginSuccess()
      if (onClose) onClose()
    } else {
      window.alert('账号或密码错误')
      setUsername('')
      setPassword('')
    }
  }
  return (
    <>
      <Modal
        open={open}
        onCancel={onClose}
        footer={null}
        width={modalWidth}
        closable={false}
        maskClosable={false}
        centered
        destroyOnClose
        style={{ padding: 0, margin: 0, top: 0, background: 'transparent', boxShadow: 'none' }}
        bodyStyle={{
          padding: 0,
          margin: 0,
          background: 'transparent',
          borderRadius: 0,
          boxShadow: 'none',
          overflow: 'visible',
        }}
        modalRender={() => (
          <div
            style={{
              width: '100%',
              height: '100%',
              pointerEvents: 'auto',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <div
              style={{
                width: modalWidth,
                height: modalHeight,
                borderRadius,
                background: '#fff',
                boxShadow: '0 8px 40px rgba(0,0,0,0.18)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
              }}
            >
              {/* 左侧蓝色区 */}
              <div
                style={{
                  width: blueWidth,
                  height: '100%',
                  background: '#1677ff',
                  borderTopLeftRadius: borderRadius,
                  borderBottomLeftRadius: borderRadius,
                  overflow: 'hidden',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  padding: 0,
                }}
              >
                <img
                  src={loginLeft}
                  alt="宣传图"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              {/* 右侧内容区 */}
              <div className='right' style={{
                width: modalWidth - blueWidth,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                position: 'relative',
                zIndex: 1,
                padding: '0 36px',
                background: `#fff url(${loginRight}) center center no-repeat`,
                backgroundSize: 'contain',
              }}>
                {/* 右上角密码登录气泡+电脑icon+三角形 */}
                <div
                  style={{
                    position: 'absolute',
                    top: 24,
                    right: 36,
                    display: 'flex',
                    alignItems: 'center',
                    zIndex: 9999,
                    cursor: 'pointer',
                    userSelect: 'none',
                    outline: 'none',
                  }}
                  onClick={() => setIsPasswordMode(mode => !mode)}
                  title={isPasswordMode ? '切换到扫码登录' : '切换到密码登录'}
                >
                  {/* 气泡主体 */}
                  <div
                    style={{
                      position: 'relative',
                      background: '#fff',
                      border: '1.5px solid #1677ff',
                      color: '#1677ff',
                      borderRadius: 8,
                      padding: '2px 16px',
                      fontSize: 15,
                      fontWeight: 500,
                      marginRight: 8,
                      boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
                      lineHeight: '28px',
                      display: 'flex',
                      alignItems: 'center',
                      minWidth: 110,
                      justifyContent: 'center',
                    }}
                  >
                    {isPasswordMode ? '扫码登录在这里' : '密码登录在这里'}
                    {/* 蓝色小三角 */}
                    <span
                      style={{
                        position: 'absolute',
                        right: 18,
                        bottom: -10,
                        width: 0,
                        height: 0,
                        borderLeft: '8px solid transparent',
                        borderRight: '8px solid transparent',
                        borderTop: '10px solid #1677ff',
                        zIndex: 1,
                      }}
                    />
                    <span
                      style={{
                        position: 'absolute',
                        right: 18,
                        bottom: -8,
                        width: 0,
                        height: 0,
                        borderLeft: '7px solid transparent',
                        borderRight: '7px solid transparent',
                        borderTop: '9px solid #fff',
                        zIndex: 2,
                      }}
                    />
                  </div>
                  {/* 电脑图标 */}
                  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                    <rect x="4" y="7" width="20" height="12" rx="2" stroke="#BFC8D7" strokeWidth="2"/>
                    <rect x="10" y="21" width="8" height="2" rx="1" fill="#BFC8D7"/>
                  </svg>
                </div>
                {/* 内容区切换 */}
                {isPasswordMode ? (
                  // 密码登录模式
                  <div style={{ width: '100%', height: '100%', flex: 1, background: 'transparent', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                    <div style={{ width: 520,height:430, background: '#fff', borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', fontSize: 20, color: '#222', position: 'relative', padding: '48px 32px 24px 32px' }}>
                      <div style={{ fontWeight: 700, fontSize: 26,  textAlign: 'center' }}>账号密码登录</div>
                   <div style={{ width: '100%',height:'110px',display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
                   <input type="text" placeholder="请输入账号" value={username} onChange={e => setUsername(e.target.value)} style={{ width: '100%', height: 44, marginTop: 10, border: '1px solid #e5e6eb', borderRadius: 6, padding: '0 12px', fontSize: 16, outline: 'none', background: '#f7f8fa', marginBottom: 8 }} />
                   <input type="password" placeholder="请输入密码" value={password} onChange={e => setPassword(e.target.value)} style={{ width: '100%', height: 44, marginTop: 0, border: '1px solid #e5e6eb', borderRadius: 6, padding: '0 12px', fontSize: 16, outline: 'none', background: '#f7f8fa', marginBottom: 0 }} />
                   </div>
               <div style={{width:'100%',height:'50px'}}> 
         <div style={{width:'20px',height:'5px'}}></div>
              
               <button style={{ width: '100%', height: 44, background: '#1677ff', color: '#fff', border: 'none', borderRadius: 6, fontSize: 18, fontWeight: 600, cursor: 'pointer', marginTop: 32}} onClick={handleLogin}>登录</button>
               <div style={{ width: '100%',height:'37px',alignItems:'center', display: 'flex', justifyContent: 'space-between', fontSize: 14, marginTop: 28,}}>
                        <a style={{ color: '#1677ff', textDecoration: 'none', cursor: 'pointer' }}>手机验证码登录</a>
                        <a style={{ color: '#1677ff', textDecoration: 'none', cursor: 'pointer' }}>忘记密码</a>
                      </div>
               </div>
             
                      {/* 其他登录方式 */}
                  
                      {/* 协议和注册 */}
                 
                    </div>
                    
                    <img src={loginCodeBottom} alt="底部装饰" style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', width: 600, height: 'auto', zIndex: 2 }} />
                  
                  </div>
                ) : (
                  // 扫码登录模式
                  <div style={{ width: '100%', height: '100%', flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 24 }}>
                    </div>
                  </div>
                )}
              </div>
              
            </div>
          </div>
        )}
      />
      {/* fixed定位关闭按钮 */}
      {open && onClose && (
        <div
          className='guan'
          style={{
            width: 30,
            height: 30,
            background: '#fff',
            borderRadius: '50%',
            position: 'fixed',
            top: `calc(50vh - 300px - 15px)`,   // 600/2+15
            left: `calc(50vw + 450px - 15px)`, // 900/2-15
            zIndex: 2001,
            boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 20,
            cursor: 'pointer',
            userSelect: 'none'
          }}
          onClick={onClose}
        >
          <CloseOutlined style={{ fontSize: 22, color: '#666' }} />
        </div>
      )}
    </>
  )
}

export default WeChatLoginModal 